<template>
  <view class="content">
    <!-- 头部导航栏（含搜索框） -->
    <view class="flex flex-1 justify-between items-center w-full header">
      <!-- 左侧分类图标 -->
      <image 
        class="icon" 
        @click="gotoTabPage('Category')"
        src=""
      ></image>
      
      <!-- 搜索框（图片背景风格，优化视觉效果） -->
      <view class="search-container flex-1">
        <input 
          type="text" 
          class="search-input" 
          @click="gotoPage('Search')" 
          v-model="searchText"
          @input="onSearch" 
          placeholder="搜索商品、品牌、店铺"
          placeholder-style="color: #999;"
        />
      </view>
      
      <!-- 右侧用户图标 -->
      <view class="user-icon">
  <uni-icons 
    type="person" 
    size="28" 
    color="#fff" 
    @click="gotoLoginPage"  
  >登录</uni-icons>
</view>

    <!-- 分类导航轮播（京东超市、电器等，横向滑动） -->
    <view class="category-swiper-wrap">
      <swiper 
        class="category-swiper"
        :indicator-dots="false" 
        :autoplay="false"        
        :circular="true"
        :duration="300"
        scroll-x                 
        @change="categoryChange"
      >
       <swiper-item v-for="(group, groupIndex) in categoryGroups" :key="groupIndex">
      <view class="category-list">
        <view class="category-item" v-for="(item, index) in group" :key="index">
          <view class="category-icon" :style="{ backgroundColor: item.bgColor }">
            <uni-icons :type="item.icon" size="36" color="#fff"></uni-icons>
          </view>
          <text class="category-name">{{ item.name }}</text>
        </view>
      </view>
    </swiper-item>
      </swiper>
    </view>

    <!-- 京东秒杀商品轮播 -->
    <view class="seckill-section">
      <view class="seckill-header">
        <text class="seckill-title">京东秒杀</text>
        <text class="seckill-subtitle">限时低价</text>
        <button class="seckill-btn">去抢购</button>
      </view>
      
      <!-- 秒杀商品横向轮播 -->
      <swiper 
        class="seckill-swiper"
        :indicator-dots="true"
        :autoplay="false"
        :interval="3000"
        :duration="500"
        scroll-x
      >
        <swiper-item>
          <view class="seckill-list">
            <view class="seckill-item" v-for="(item, index) in seckillList" :key="index">
              <image :src="item.imgUrl" class="seckill-img" mode="widthFix"></image>
              <text class="seckill-price">¥{{ item.price }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 底部图片 -->
    <image 
      class="bottom-img"
      src=""
    ></image>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello Mini Program",
      searchText: "",
      searchResults: [],
      // 轮播配置
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 1000,
      // 分类数据（移到data里，适配Vue2）
      categoryList: [
        { name: '京东超市', icon: 'shop', bgColor: '#4CAF50' },
        { name: '京东电器', icon: 'monitor', bgColor: '#2196F3' },
        { name: '服饰美妆', icon: 'tshirt', bgColor: '#E91E63' },
        { name: '充值中心', icon: 'credit-card', bgColor: '#FF9800' },
        { name: 'PLUS会员', icon: 'vip', bgColor: '#9C27B0' },
         { name: '1京东超市', icon: 'shop', bgColor: '#4CAF50' },
        { name: '京东电器', icon: 'monitor', bgColor: '#2196F3' },
        { name: '服饰美妆', icon: 'tshirt', bgColor: '#E91E63' },
        { name: '充值中心', icon: 'credit-card', bgColor: '#FF9800' },
        { name: 'PLUS会员', icon: 'vip', bgColor: '#9C27B0' }
      ],
      // 秒杀商品数据（移到data里）
      seckillList: [
        { imgUrl: '/static/images/seckill1.jpg', price: '3.54' },
        { imgUrl: '/static/images/seckill2.jpg', price: '6.71' },
        { imgUrl: '/static/images/seckill3.jpg', price: '7.98' },
        { imgUrl: '/static/images/seckill4.jpg', price: '6.80' }
      ]
    };
  },
  onLoad() {
    // uni.request({
    //   url:
    //   // success: (res) => {
        
    //   // }
    // })
   },
  methods: {
    // 跳转到分类页
    gotoTabPage(pageTag) {
      uni.switchTab({
        url: `/pages/Catagory/index`,
      });
    },
    // 跳转到搜索页
    gotoPage(pageTag) {
      uni.navigateTo({
        url: "/pages/Search/index",
      });
    },
    // 搜索输入处理
    onSearch(e) {
      const text = e.detail.value;
      if (!text) {
        this.searchResults = [];
        return;
      }
      console.log("搜索内容：", text);
    },
    // 分类轮播变化回调
    categoryChange(e) {
      console.log("分类轮播索引：", e.detail.current);
    },
     gotoLoginPage() {
    // 获取当前页面路径作为登录后重定向地址
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const currentPath = currentPage.route;
    
    uni.navigateTo({
      // 传递当前页面路径作为redirect参数
      url: `/pages/Login/index?redirect=${currentPath}`
    });
  },
  }
};


// 分类数据（新增icon和背景色，适配轮播样式）

</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.h-50 {
  height: 50px;
}

.header {
  background: linear-gradient(180deg, #ff5454 0.63%, #f4f4f4 80.65%);
  width: 100%;
  height: 50px;
  padding: 0 10px;
  box-sizing: border-box;
}

.search-input {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  padding: 0 15px;
  height: 36px;
  width: 100%;
  color: #333;
}
.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.user-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.category-swiper-wrap {
  width: 100%;
  height: auto;
  margin: 10px 0;
}

.category-swiper {
  height: 180px; /* 固定高度 */
  width: 100%;
}

.category-list {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行 */
  width: 100%;
}

.category-item {
  width: 20%; /* 5个占满100%宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.category-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.category-name {
  font-size: 12px;
  color: #333;
}

.seckill-section {
  width: 100%;
  margin: 10px 0;
  padding: 0 10px;
  box-sizing: border-box;
}

.seckill-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.seckill-title {
  font-size: 16px;
  font-weight: bold;
  color: #ff5454;
  margin-right: 10px;
}

.seckill-subtitle {
  font-size: 12px;
  color: #999;
  margin-right: 10px;
}

.seckill-btn {
  font-size: 12px;
  background: #ff5454;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: auto;
}

.seckill-swiper {
  height: 120px;
  width: 100%;
}

.seckill-list {
  display: flex;
  width: 100%;
}

.seckill-item {
  width: 100px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seckill-img {
  width: 100px;
  height: 80px;
  border-radius: 5px;
}

.seckill-price {
  color: #ff5454;
  font-size: 14px;
  font-weight: bold;
  margin-top: 5px;
}

.bottom-img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
</style>
